<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        body {
            padding: 1px;
        }

        .container {
            width: 1200px;
            margin: 50px auto;
            overflow: hidden;
        }

        .container ul {
            float: left;
            width: 22%;
            margin-right: 4%;
        }

        .container ul li {
            width: 100%;
            font-size: 35px;
            color: #fff;
            text-align: center;
        }

        .container ul:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!-- 进入页面：
        生成一行 4个 颜色块儿--高度随机，颜色随机，高度差为5，有序号
        添加到页面中，每次生成的块儿总是添加在最短列
        滚动条距离底部 > 200

    滚动时：
        距离底部 < 100，添加一行颜色块儿 -->

    <div class="container">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>

    <script type="text/javascript">
        // 页面高度 - 可视区域高度 < 200 生成一行颜色块儿，添加到页面中
        var bodyEle = document.body,
            htmlEle = document.documentElement,
            // 序号
            count = 0,
            // ul列表
            uls = document.querySelectorAll("ul");

        while(bodyEle.scrollHeight - htmlEle.clientHeight < 200){
            create();
        }

        window.onscroll = function (){
            // 页面高度 - 可视区域高度 - 卷入高度 < 100 生成一行颜色块儿，添加到页面中
            var sct = window.pageYOffset;
            if(bodyEle.scrollHeight - htmlEle.clientHeight - sct < 100){
                create();
            }
        }

        function create(){
            // 保存高度的数组
            var hArr = [];

            // 随机颜色，随机高度
            for(var i = 0; i < 4; i ++){
                count ++;
                var liEle = document.createElement("li");
                var h = rd(230, 260, 5);
                /* 去重
                if(hArr.indexOf(h) === -1){
                    hArr.push(h);
                    ...
                }else {
                    i --;
                } */

                // 将多个通过 style.样式 = xx 的方式集合的写法
                // 内容类似于写行内样式 DOM  set/get/removeAttribute
                liEle.style.cssText = `height: ${ h }px;line-height: ${ h }px;background-color: rgb(${ rd(0,255,1) },${ rd(0,255,1) },${ rd(0,255,1) })`;
                liEle.innerText = count;

                // 找到最小高度的ul元素，添加到其下   minIndex
                var minIndex = 0;
                for(var j = 1; j < 4; j ++){
                    if(uls[minIndex].scrollHeight > uls[j].scrollHeight){
                        minIndex = j;
                    }
                }

                uls[minIndex].append(liEle);
            }
        }      
        
        function rd(min, max, n){
            // [min, max]  [230, 260]
            // return Math.floor(Math.random() * (max-min+1)) + min;
            // return Math.round(Math.random() * (max-min)) + min;

            // 等差随机  相差 n
            return Math.floor(Math.random() * (max-min+1) / n)*n + min;
        }
    </script>
</body>
</html>